@import "base.scss";
@import "mixin.scss";

//common CSS
html,body {
    color: $color333;
    min-width: 0;
    background: #e3e4e7;
}
.SY_editor {
    padding-left: 35 * $fontSize10;
    @media screen and (max-width: 100 * $fontSize12) {
        padding-left: 25 * $fontSize10;
    }
    @media screen and (max-width: 106 * $fontSize10) {
        padding-left: 0;
    }
}
.SY_editor_max {
    padding:0 !important;
    .SY_editor_list {
        display: none;
    }
    .main_toolbar_inner {
        margin: 0;
    }
    .main_business_inner {
        margin: 0;
    }
    .SY_editor_main {
        padding-top: 6 * $fontSize10;
    }
    .main_head {
        display: none;
    }
    .main_toolbar.toolbar_fixed {
        transform: none;
    }
    .main_toolbar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        margin: 0;
        ul {
            li {
                &.row:last-child {
                    float: right;
                }
                &.row:last-child > ul {
                    border-left: none;
                }
            }
            .icon_maxwin {
                i {
                    background-position: - 57 * $fontSize10 0;
                }
                &:hover {
                    i {
                        background-position: - 57 * $fontSize10 (- 6 * $fontSize10);
                    }
                }
            }
            .curr {
                .icon_maxwin i {
                    background-position: - 57 * $fontSize10 (- 3 * $fontSize10);
                }
            }
            .disable {
                .icon_maxwin i {
                    background-position: - 57 * $fontSize10 (- 9 * $fontSize10);
                }
            }
        }
    }
    .main_box {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin:0 auto !important;
    }
    .main_toppic {
        display: none;
    }
    .main_editor {
        .title {
            display: none;
        }
        .preface {
            display: none;
        }
    }
    .main_foot {
        display: none;
    }
}
.SY_reedit {
    @extend .SY_editor_max;
}
.SY_editor_wrap {
    width: 100%;
}

//left -> list
.SY_editor_list {
    position: fixed;
    left: 0;
    top: 6 * $fontSize10;
    width: 35 * $fontSize10;
    height: 100%;
    border-right: 1px solid #c6c6c6;
    z-index: 10000;
    background: $colorfff;
    @media screen and (max-width: 100 * $fontSize12) {
        width: 25 * $fontSize10;
    }
    @media screen and (max-width: 106 * $fontSize10) {
        display: none;
    }
    .bor {
        padding:0 0 $fontSize20;
        border-bottom: 1px solid #f2f2f5;
        a {
            @media screen and (max-width: 100 * $fontSize12) {
                padding-left: $fontSize16 / 2;
                padding-right: $fontSize16 / 2;
            }
        }
    }
    .build_new {
        .bor {
            height: 6 * $fontSize10;
            line-height: 6 * $fontSize10;
            padding:0;
            color: #808080;
        }
        a {
            display: block;
            font-size: $fontSize14;
            height: 100%;
            padding-left: $fontSize16;
            overflow: hidden;
            color: $theme;
            &:hover {
                background: #f6f9ff;
            }
            i {
                font-size: $fontSize16;
            }
        }
    }
    .list_wrap {
        overflow-x: hidden;
        overflow-y: auto;
    }
    li {
        position: relative;
        padding:$fontSize16 $fontSize16 0;
        cursor: pointer;
        @media screen and (max-width: 100 * $fontSize12) {
            padding-left: $fontSize16 / 2;
            padding-right: $fontSize16 / 2;
        }
        &.curr {
            background: #f2f2f4;
        }
        &:hover {
            .del {
                visibility: visible;
            }
            .tit.fs2 {
                color: $theme;
            }
        }
        .tit {
            font-size: $fontSize16;
            color: $color666;
            margin:0 0 $fontSize14 / 2;
            line-height: $fontSize16;
        }
        .status {
            .fl {
                width: 70%;
                font-size: $fontSize14 - 1;
                color: $colorab;
            }
            .time {
                margin:0 $fontSize10 0 0;
            }
        }
        .del {
            display: inline-block;
            top: $fontSize16 / 2;
            right: $fontSize16 / 2;
            width: $fontSize20;
            height: $fontSize20;
            line-height: $fontSize20;
            font-size: $fontSize16;
            text-align: center;
            visibility: hidden;
            &:hover {
                color: red;
            }
        }
    }
}
.SY_reedit {
    .SY_editor_list {
        display: none;
    }
}
.S_autocut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

//main-content
.SY_editor_main {
    width: 100%;
    min-width: 80 * $fontSize10;
    padding: 8 * $fontSize10 0 0;
}
.main_head {
    top: 0;
    left: 0;
    width: 100%;
    min-width: 80 * $fontSize10;
    z-index: 10001;
    .main_head_inner {
        height: 6 * $fontSize10;
        background: $color333;
        .logoBox {
            margin-top: $fontSize16;
            margin-left: 3 * $fontSize10;
            img {
                width: 4 * $fontSize10 + 6;
                height: 3 * $fontSize10 - 1;
            }
            .slogin {
                display: inline-block;
                font-size: $fontSize22;
                line-height: 2 * $fontSize12;
                color: $colorfff;
                vertical-align: top;
                margin:$fontSize10 / 5 0 0 $fontSize12 / 2;
            }
        }
        .rightMsg {
            margin-right: 3 * $fontSize10;
            .user {
                .avatar {
                    width: 3 * $fontSize10;
                    height: 3 * $fontSize10;
                    margin:$fontSize10 + 5 $fontSize10 0 0;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .nickName {
                    line-height: 6 * $fontSize10;
                    color: $colorfff;
                }
            }
        }
    }
}

//editor -> main_toolbar
.main_toolbar {
    width: 80 * $fontSize10;
    margin:4 * $fontSize10 (-(4 * $fontSize10 + 7));
    font-size: $fontSize12;
    &.toolbar_fixed {
        position: fixed;
        top: 0;
        left: 50%;
        width: 79 * $fontSize10 + 8;
        margin:0;
        z-index: 999;
        @include transform(translateX(-50%));
    }
    &.disable .cover {
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0);
        z-index: 1000;
    }
    .main_toolbar_inner {
        height: 3 * $fontSize10 + 9;
    	border-bottom:1px solid #ececec;
    	background:#f2f2f5;
        @include boxShadow(0 1px 0 #f8f8f8);
    }
    &.disable ul {
        li {
           .icon_bold i {
               background-position: 0 (- 9 $fontSize10);
           }
           .icon_italic i {
               background-position: - 3 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_linethrough i {
               background-position: - 9 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_color {
               background-position: - 12 * $fontSize10 (- 9 * $fontSize10);
               border-bottom: 3px solid #d9d9d9 !important;
           }
           .S_select {
               &:hover {
                   border-color: #d9d9d9 !important;
                   @include boxShadow(0px 0px 3px 0px rgba(0,0,0,0.15) inset);
               }
           }
           .icon_ol i {
               background-position: - 27 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_ul i {
               background-position: - 24 * $fontSize10 (- 9 * $fontSize10);
           }
           span,.S_icon,.fa-caret-down {
               color: #d9d9d9 !important;
           }
           a,a>i,.S_select {
               cursor: default;
           }
           .icon_tl i {
               background-position: - 30 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_tc i {
               background-position: - 33 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_tr i {
               background-position: - 36 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_blockquote i {
               background-position: - 21 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_line i {
               background-position: - 63 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_image i {
               background-position: - 78 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_video i {
               background-position: - 42 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_link i {
               background-position: - 66 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_commodity i {
               background-position: - 69 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_filmreview i {
               background-position: - 90 * $fontSize10 (- 9 * $fontSize10);
           }
           .icon_maxwin i {
               background-position: - 51 * $fontSize10 (- 9 * $fontSize10);
           }
        }
        .icon_image input {
            cursor: default;
        }
    }
    ul {
        li {
            &.row {
                float: left;
                margin:0 0 0 (-($fontSize10 / 10));
                > ul {
                    height: $fontSize20;
                    margin:$fontSize10 0;
                    padding:0 $fontSize14 / 2;
                    border-left: 1px solid #c8c8c8;
                    > li {
                        position: relative;
                        float: left;
                        margin:-$fontSize10 $fontSize10 / 5 0;
                        > a {
                            display: inline-block;
                            height: $fontSize18;
                            padding:$fontSize10 $fontSize16 / 2;
                            overflow: hidden;
                            vertical-align: top;
                        }
                    }
                    .more {
                        > a {
                            height: 3 * $fontSize10 + 8;
                            margin:0 $fontSize10 + 5 0 0;
                            padding:0 $fontSize10 / 2 0 $fontSize10;
                            &.opt {
                                margin:0 0 0 (- ($fontSize10 + 5));
                                padding:0 $fontSize10 + 5 0 0;
                                .S_icon {
                                    margin:$fontSize12 0 0;
                                }
                            }
                        }
                    }
                    .more2 {
                        > a {
                            height:  2 * $fontSize10 + 6;
                            margin: $fontSize12 / 2 $fontSize10 0 0;
                            padding:0 $fontSize10 / 2;
                        }
                    }
                }
                .more .S_icon {
                    margin: $fontSize10 0 0;
                    vertical-align: top;
                }
                .more2 {
                    .S_select {
                       width: 5 * $fontSize10 + 3;
                       height: 2 * $fontSize12;
                       line-height: 2 * $fontSize12;
                       border-color: #d9d9d9;
                       background-color: $colorfff;
                       span {
                           color: $color333;
                           font-size: $fontSize12;
                       }
                   }
                   .fa-caret-down {
                       right: $fontSize12 / 2;
                       top: 0;
                       width: auto;
                       height: 2 * $fontSize12 + 2;
                       line-height: 2 * $fontSize12;
                       vertical-align: middle;
                   }
                }
            }
        }
        .S_icon i,.icon_color {
            display: inline-block;
            height: $fontSize18;
            background: url("../img/editor/bg_longwb.png") no-repeat;
            overflow: hidden;
        }
        .icon_bold {
            i {
                width: $fontSize10;
                background-position: 0 0;
            }
            &:hover {
                i {
                    background-position: 0 (- 6 * $fontSize10);
                }
            }
        }
        .icon_italic {
            i {
                width: $fontSize16 / 2;
                background-position: - 3 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: -3 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_linethrough {
            i {
                width: 2 * $fontSize12;
                background-position: - 9 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 9 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_color {
            width: $fontSize14 - 1;
            height: $fontSize16;
            background-position: - 12 * $fontSize10 0;
        }
        .icon_ol {
            i {
                width: $fontSize16;
                background-position: - 27 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 27 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_ul {
            i {
                width: $fontSize16;
                background-position: - 24 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 24 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_tl {
            i {
                width: $fontSize14;
                background-position: - 30 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 30 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_tc {
            i {
                width: $fontSize14;
                background-position: - 33 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 33 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_tr {
            i {
                width: $fontSize14;
                background-position: - 36 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 36 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_blockquote {
            i {
                width: $fontSize10 + 1;
                background-position: - 21 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 21 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_line {
            i {
                width: $fontSize16;
                background-position: - 63 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 63 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_image {
            i {
                width: $fontSize20;
                background-position: - 78 * $fontSize10 0;
                vertical-align: top;
            }
            &:hover {
                i {
                    background-position: - 78 * $fontSize10 (- 6 * $fontSize10);
                }
            }
            input {
                position: absolute;
                top: 0;
                right: 0;
                @include opacity(0);
                font-size: 5 * $fontSize10 + 8;
                cursor: pointer;
            }
        }
        .icon_video {
            i {
                width: $fontSize20;
                background-position: - 42 * $fontSize10 0;
                vertical-align: top;
            }
            &:hover {
                i {
                    background-position: - 42 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_link {
            i {
                width: $fontSize18;
                background-position: - 66 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 66 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_commodity {
            i {
                width: $fontSize18;
                background-position: - 69 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 69 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_filmreview {
            i {
                width: $fontSize18;
                background-position: - 90 * $fontSize10 0;
                font-size: $fontSize12;
            }
            &:hover {
                i {
                    background-position: - 90 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .icon_maxwin {
            i {
                width: $fontSize14;
                background-position: - 51 * $fontSize10 0;
            }
            &:hover {
                i {
                    background-position: - 51 * $fontSize10 (- 6 * $fontSize10);
                }
            }
        }
        .disable {
            .icon_bold i {
                background-position: 0 (- 9 $fontSize10);
            }
            .icon_italic i {
                background-position: - 3 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_linethrough i {
                background-position: - 9 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_color {
                background-position: - 12 * $fontSize10 (- 9 * $fontSize10);
                border-bottom: 3px solid #d9d9d9 !important;
            }
            .S_select {
                &:hover {
                    border-color: #d9d9d9 !important;
                    @include boxShadow(0px 0px 3px 0px rgba(0,0,0,0.15) inset);
                }
            }
            .icon_ol i {
                background-position: - 27 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_ul i {
                background-position: - 24 * $fontSize10 (- 9 * $fontSize10);
            }
            span,.S_icon,.fa-caret-down {
                color: #d9d9d9 !important;
            }
            a,a>i,.S_select {
                cursor: default;
            }
            .icon_tl i {
                background-position: - 30 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_tc i {
                background-position: - 33 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_tr i {
                background-position: - 36 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_blockquote i {
                background-position: - 21 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_line i {
                background-position: - 63 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_image i {
                background-position: - 78 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_video i {
                background-position: - 42 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_link i {
                background-position: - 66 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_commodity i {
                background-position: - 69 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_filmreview i {
                background-position: - 90 * $fontSize10 (- 9 * $fontSize10);
            }
            .icon_maxwin i {
                background-position: - 51 * $fontSize10 (- 9 * $fontSize10);
            }
        }
        .curr {
            .icon_bold i {
                background-position: 0 (- 3 * $fontSize10);
            }
            .icon_italic i {
                background-position: - 3 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_linethrough i {
                background-position: - 9 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_ol i {
                background-position: - 27 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_ul i {
                background-position: - 24 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_tl i {
                background-position: - 30 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_tc i {
                background-position: - 33 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_tr i {
                background-position: - 36 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_blockquote i {
                background-position: - 21 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_line i {
                background-position: - 63 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_image i {
                background-position: - 78 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_video i {
                background-position: - 42 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_link i {
                background-position: - 66 * $fontSize10 (- 3 *$fontSize10);
            }
            .icon_commodity i {
                background-position: - 69 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_filmreview i {
                background-position: - 90 * $fontSize10 (- 3 * $fontSize10);
            }
            .icon_maxwin i {
                background-position: - 51 * $fontSize10 (- 3 * $fontSize10);
            }
        }
    }
}
.S_select {
    position: relative;
    display: inline-block;
    width: 15 * $fontSize10;
    height: 3 * $fontSize10 - 2;
    line-height: 3 * $fontSize10 - 2;
    padding: 0 $fontSize12 / 2;
    border-width: 1px;
    border-style: solid;
    @include boxShadow(0px 0px 3px 0px rgba(0,0,0,0.15) inset);
    overflow: hidden;
    &:hover {
        border-color: $theme !important;
        @include boxShadow(none);
    }
}
.S_layer {
    top: 3 * $fontSize10 - 1;
    left: (-(6 * $fontSize10 + 6));
    color: $color333;
    text-decoration: none;
    z-index: 9999;
    .content {
        background: $colorfff;
        @include borderRadius(3px);
        @include border(1px,solid,$colorccc);
        @include boxShadow(0 $fontSize12 / 3 $fontSize20 $fontSize10 / 10 rgba(0,0,0,0.2));
    }
}
.layer_color {
    width: 16 * $fontSize10 + 8;
    padding:$fontSize14 $fontSize16 $fontSize12;
    h2 {
        height: $fontSize20;
        line-height: $fontSize20;
        overflow: hidden;
        &:hover {
            background: #d5e1f2;
        }
        span {
            display: inline-block;
            width: $fontSize14;
            height: $fontSize14;
            margin:$fontSize10 / 10 $fontSize10 / 2 0 0;
            padding:$fontSize10 / 5;
            vertical-align: top;
        }
        i {
            display: inline-block;
            width: 100%;
            height: 100%;
            @include borderRadius(2px);
            overflow: hidden;
            vertical-align: top;
        }
    }
    h3 {
        height: $fontSize20;
        line-height: $fontSize20;
        margin:$fontSize10 + 1 0 $fontSize16 / 2;
        padding:0 $fontSize12 / 3;
        overflow: hidden;
        background: #eee;
    }
    ul {
        height: auto;
        margin:0 (- $fontSize14 / 2) 0 0;
    }
    li {
        float: left;
        width: $fontSize18;
        margin:0 $fontSize14 / 2 0 0;
        overflow: hidden;
        a {
            display: block;
            width: $fontSize14;
            height: $fontSize14;
            margin: 0 0 $fontSize10 / 5;
            padding:$fontSize10 / 10;
            @include border(1px,solid,$colorfff);
            @include borderRadius(2px);
            overflow: hidden;
            &:hover {
                border-color: #ff8140;
            }
            i {
                display: block;
                width: 100%;
                height: 100%;
                @include borderRadius(2px);
                overflow: hidden;
            }
        }
    }
}
.layer_menu_list {
    top: 2 * $fontSize16;
    color: $color333;
    padding:$fontSize10 / 5;
    @include border(1px,solid,$colorccc);
    @include borderRadius(2px);
    @include boxShadow(0px $fontSize10 / 5 $fontSize16 / 2 $fontSize10 / 10 rgba(0,0,0,0.2));
    background: $colorfff;
    ul {
        padding:0;
        margin:0;
        li {
            position: static;
            margin:0;
            padding:0;
            display: inline;
            a {
                white-space: nowrap;
                min-width: 5 * $fontSize10;
                padding:$fontSize14 / 2 $fontSize10 + 3;
                color: $color333;
                display: block;
                cursor: pointer;
                &:hover {
                    background-color: #f2f2f5;
                    color: #eb7350;
                }
            }
        }
    }
}

//main-box
.main_box {
    position: absolute;
    width: 80 * $fontSize10;
    left: 50%;
    @include transform(translateX(-50%));
    @include border(1px,solid,#d0d0d1);
    @include borderRadius(2px);
    @include boxShadow(0 0 $fontSize10 / 5 #d0d0d1);
    background: $colorfff;
    .main-content {
        overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width:$fontSize12 / 2;
            height:$fontSize12 / 2;
        }
        &::-webkit-scrollbar-track {
            background:#FF66D5;
        }
        &::-webkit-scrollbar-thumb {
            background:$colorccc;
            border-radius:16px;
        }
        &::-webkit-scrollbar-track-piece {
            background: #eee;
        }
    }
    .main_attachment {
        width: 100%;
        bottom: 0;
        border-top: 1px solid $colore5;
    }
}
.main_toppic {
    width: 100%;
    height: 24 * $fontSize10;
    background: #f2f2f5;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    &:hover {
        background: #f6f9ff;
    }
    .uploading {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: $theme;
        background:rgba(90, 90, 90, 0.3);
        z-index: 99;
        i {
            position: relative;
            top: 50%;
            margin-top: - $fontSize18;
        }
    }
    .txtbox {
        top: 50%;
        left: 0;
        width: 100%;
        font-size: $fontSize12;
        margin:- $fontSize10 0 0;
        text-align: center;
        color: $color666;
    }
    .upload {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        input {
            position: absolute;
            top: 0;
            right: 0;
            @include opacity(0);
            font-size: 24 * $fontSize10;
            cursor: pointer;
        }
    }
    .picbox img {
        width: auto;
        height: auto;
    }
    .btn_c {
        display: block;
        color: $colorfff;
        @include borderRadius(3px);
        background-color: rgba(74,74,74,0.6);
        cursor: pointer;
        &:hover {
            background-color: $theme;
        }
        input {
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            @include opacity(0);
            font-size: $fontSize20 + 6;
            cursor: pointer;
        }
    }
    .optbox {
        bottom: $fontSize20;
        right: $fontSize20;
        .btn_c {
            width: 6 * $fontSize10 + 4;
            height: $fontSize20 + 8;
            line-height: $fontSize20 + 8;
            i {
                font-size: $fontSize14;
                margin-right: $fontSize12 / 4;
            }
        }
    }
    .optbox2 {
        top: $fontSize20;
        right: $fontSize20;
        .btn_c {
            width: $fontSize20 + 6;
        	height: $fontSize20 + 6;
        	line-height: $fontSize20 + 6;
            font-size: $fontSize14;
            text-align: center;
        }
    }
}
.main_toppic_v2 {
    height: 40 * $fontSize10;
    overflow: hidden;
}
.main_toppic_cursor {
    cursor: move;
}
.S_input {
    background: $colorfff;
    outline: none;
    height: $fontSize20 + 8;
    line-height: normal;
    vertical-align: middle;
}
.main_editor {
    position: relative;
    width: 70 * $fontSize10;
    margin: 4 * $fontSize10 auto 0;
    font-size: $fontSize16;
    .S_input {
        width: 63 * $fontSize10;
        padding:0 5 * $fontSize10 0 0;
        border:none;
        box-shadow: none;
    }
    .tips {
        display: inline-block;
        top: auto;
        right: 0;
        bottom:- 3 * $fontSize10;
        font-size: $fontSize14;
        line-height: $fontSize20 + 8;
        color: $colorccc;
    }
    .title {
        font-size: 3 * $fontSize10;
        .S_input {
            height: 10 * $fontSize10;
            line-height: 5 * $fontSize10;
            font-size: 3 * $fontSize10;
            color: $color000;
            resize: none;
            overflow: hidden;
            &::placeholder {
                color: #808080;
            }
        }
        .tips {
            bottom : $fontSize10 + 1;
        }
    }
    .preface {
        margin:5 * $fontSize10 / 2 0;
        padding:$fontSize12 3 * $fontSize10;
        background: #f2f2f5;
        .S_input {
            font-size: $fontSize14;
            background: transparent;
            &::placeholder {
                color: #808080;
            }
        }
    }
}
.S_editor_frame {
    font-size: $fontSize16;
    line-height: $lineHeight + 0.15;
    word-wrap: break-word;
    cursor: text;
    background: $colorfff;
    p,div,h1,h2 {
        margin:0 0 $fontSize16 / 2;
    }
    p:before,div:before,h1:before,h2:before,blockquote:before,li:before {
        content:'';
    }
    p.imgBoxLoading {
        color: $theme;
    }
    hr {
        display: block;
        height: $fontSize10 / 10;
        margin:$fontSize12 0;
        border:0;
        border-top: 1px solid #e6e6e6;
    }
    blockquote {
        margin:$fontSize20 + 1 0;
        padding:5 * $fontSize10 + 5 3 * $fontSize10 3 * $fontSize10 + 5;
        border-left: $fontSize12 / 3 solid #d9d9d9;
        background: url("../img/editor/bg_blockquote.png") no-repeat 3 * $fontSize10 2 * $fontSize10 #f2f2f5;
        color: #808080;
    }
    ul {
        margin:0 0 $fontSize16 $fontSize20;
        list-style: disc;
        li {
            list-style: disc;
        }
    }
    ol {
        margin:0 0 $fontSize16;
        list-style: decimal;
        li {
            list-style-type: inherit;
            list-style-position: inside;
        }
    }
    i {
        font-style: italic;
    }
    h1 {
        font-size: $fontSize20 + 6;
    }
    h2 {
        font-size: $fontSize22
    }
    a {
        color: $theme;
    }
    img {
        display: block;
        max-width: 100%;
        margin:0 auto;
        width: auto;
        height: auto;
    }
}
.editor_in_v2 {
    min-height: 20 * $fontSize10;
    margin-bottom: 5 * $fontSize10 + 6;
    .placeholder {
        background: url("../img/editor/write.gif") no-repeat 0 0;
    }
    .S_editor_frame {
        &:focus {
            outline: none
        }
    }
}

//main-box -> main-foot
.main_foot {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4 * $fontSize10 + 5;
    background: #f2f2f5;
    border-top: 1px solid #d0d0d1;
    @include boxShadow(0 (- $fontSize10 / 10) 0 #dedee1);
    z-index: 100;
    .main_foot-inner {
        margin-left: 35 * $fontSize10;
        @media screen and (max-width: 100 * $fontSize12) {
            margin-left: 25 * $fontSize10;
        }
        @media screen and (max-width: 106 * $fontSize10) {
            margin-left: 0;
        }
        .foot-content {
            width: 80 * $fontSize10;
            margin:0 auto;
            height: 4 * $fontSize10 + 5;
            line-height: 4 * $fontSize10 + 5;
            .btns {
                height: 3 * $fontSize10 + 4;
                margin:$fontSize12 / 2 0 0;
            }
            a {
                display: inline-block;
                line-height: 3 * $fontSize10 + 4;
                font-size: $fontSize14;
                margin:0 0 0 3 * $fontSize10;
                vertical-align: top;
            }
            .nextStepBtn {
                padding:0 $fontSize14 + 1;
                color: $colorfff;
                @include borderRadius(2px);
                @include boxShadow(0 $fontSize10 / 10 $fontSize10 / 5 rgba(0,0,0,0.25));
                @include link-posColor($theme,$darkTheme);
            }
            .saveBtn {
                &:hover {
                    color: $theme;
                }
            }
        }
    }
}
.SY_reedit .main_foot-inner {
    margin-left: 0 !important;
}
